import { Component, OnInit } from '@angular/core';
import {HttpClient,HttpClientJsonpModule,HttpHeaders} from "@angular/common/http";//引用组件
// import {Observable} from "rxjs"; //用rxjs请求数据,也不知道有啥好处
// import "rxjs/Rx"; //用rxjs请求数据,也不知道有啥好处

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {
  title="nihao"  //第一中定义属性的方法
  msg:any        //第二种定义属性的方法:先声明,后赋值
  public username="zhangsan" //定义属性修饰符
  //public 可以在类内外使用
  //private 可以在当前类使用
  //protected 只有在当前类和子类中使用

  public xiaoming:string="lisi" //定义属性类型的同时,制定适用范围
  public h="<div>这是html数据</div>"

  //ng for循环
  public list:string[]=['111','222','333']
  public list2:any[]=[];

  public list3:any=[]
  public list4:any=[]
  private headers=new HttpHeaders({'Content-Type':'application/json'}) //实例化一个http头部
  public list5:any=[]
  public list6:any=[]

  constructor(private http:HttpClient,private jsonp:HttpClientJsonpModule) {//注册组件

  }

  ngOnInit(): void {
    this.msg="ok";
    this.list2=["2222","3333","4444"];
    //this.requestData()
  }
  requestData(){
    var _this=this
    var url="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
    this.http.get(url).subscribe(function (data){ //get请求
      console.log(JSON.parse(JSON.stringify(data)).result[0])
      _this.list3=JSON.parse(JSON.stringify(data)).result

    },function (err){
      console.log(err)
    })
  }
  requestJsonpData(){
    var _this=this
    var url="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSONP_CALLBACK"; //jsonp必须在参数中加回调参数&callback=JSONP_CALLBACK
    this.http.jsonp(url,'true').subscribe(function (data){ //jsonp请求,据说可以规避跨域的问题
      console.log(data)
      console.log(JSON.parse(JSON.stringify(data)).result[0])
      _this.list4=JSON.parse(JSON.stringify(data)).result
    },function (err){
      console.log(err)
    })
  }
  postData(){
  //1.引入请求头
    //2.实例化头部
    //3.post提交数据
    var url="http://127.0.0.1:3000/dologin"
    //var url="http://127.0.0.1:3000/news"
    this.http.post(url,JSON.stringify({"username":"zhangsan"}),{headers:this.headers}).subscribe(function (data){
      console.log(data)
    },function (err){
      console.log(err)
    })
  }
  requestrxjsData(){
    // var url="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSONP_CALLBACK";
    // this.http.get(url).map(res=>res.json()).subscribe(function (data){
    //   console.log(data)
    // },function (err){
    //   console.log(err)
    // })
    //失败了
  }
}
